<template>
    <el-form :model="data">
        <el-form-item label="属性类别：">
            <el-transfer :titles="['待选择', '已选择']" v-model="value" filterable :filter-method="filterMethod"
                filter-placeholder="State Abbreviations" :data="data" @change="handleChange" />
        </el-form-item>
        <el-form-item label="商品规格：">
            <el-transfer :titles="['待选择', '已选择']" v-model="value2" filterable :filter-method="filterMethod"
                filter-placeholder="State Abbreviations" :data="data2" @change="handleChanges" />
        </el-form-item>
        <el-form-item label-width="120px">
            <el-button style="margin-top: 12px" @click="previous">上一步，填写商品信息</el-button>
            <el-button style="margin-top: 12px" @click="submit" type="primary">下一步，填写商品促销</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import * as http from "@/request/http"
import { useToPro } from "@/store/AddToPro"
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter()

const useAddToPro = useToPro()

interface Option {
    key: number
    label: string
    initial: string
}

const data = ref<Option[]>([])
const data2 = ref<Option[]>([])

http.productCate.subjectListAll().then(res => {
    const states = res.data.map(item => {
        return item.title
    })
    const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
    states.forEach((city, index) => {
        return data.value.push({
            label: city,
            key: index,
            initial: initials[index],
        });
    })
})

http.productCate.prefrenceAreaListAll().then(res => {
    const states = res.data.map(item => {
        return item.name
    })
    const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
    states.forEach((city, index) => {
        return data2.value.push({
            label: city,
            key: index,
            initial: initials[index],
        });
    })
})

const value = ref([])
const value2 = ref([])

let subjectProductRelationList = reactive<any>([])
// 要发送的数据
let prefrenceAreaProductRelationList = reactive<any>([])
// 要发送的数据

const handleChange = () => {
    subjectProductRelationList = value.value.map(item => {
        return {
            subjectId: item
        }
    })
    useAddToPro.PushData(subjectProductRelationList)
}

const handleChanges = () => {
    prefrenceAreaProductRelationList = value2.value.map(item => {
        return {
            prefrenceAreaId: item
        }
    })
    useAddToPro.PushData(prefrenceAreaProductRelationList)

}

const filterMethod = (query: any, item: any) => {
    return item.initial.toLowerCase().includes(query.toLowerCase())
}

const emits = defineEmits<{
    (e: "next"): void
    (e: "previous"): void
}>()

const previous = () => {
    emits("previous")
}

const submit = () => {
    ElMessageBox.confirm(
        '是否确认提交',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            http.productCate.productCreate(useAddToPro.ProductAll).then((res) => {
                if (res.code === 200) {
                    ElMessage({
                        type: 'success',
                        message: 'Delete completed',
                    })
                    emits("next")
                    router.push("addProduct")
                    window.location.reload();
                } else {
                    ElMessage({
                        type: 'info',
                        message: '请求参数不对',
                    })
                    emits("next")
                    router.push("addProduct")
                    window.location.reload();
                }
            }).catch(err => {
                ElMessage({
                    type: 'info',
                    message: '请求参数不对' + err,
                })
                emits("next")
                window.location.reload();
            })
        })
        .catch((err) => {
            ElMessage({
                type: 'info',
                message: '请求参数不对' + err,
            })
            emits("next")
            router.push("addProduct")
            window.location.reload();
        })
}
</script>